<template>
  <el-card>
    <div slot="header" class="clearfix relative">
      <span class="title-icon">{{ title }}</span>
    </div>

    <!-- <el-checkbox-group v-model="checked" @change="handleCheckedCitiesChange">
      <el-checkbox
        v-for="(city, val) in selectOption"
        :label="parseInt(val)"
        :key="val"
      >
      </el-checkbox>
    </el-checkbox-group> -->
    <el-table
      size=""
      class="table-main"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="font-size: 13px;width: 100%"
      :row-style="{height:'5px'}"
      :cell-style="{padding:'0px'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="26"> </el-table-column>
      <el-table-column prop="name" label="渠道名称"> </el-table-column>
      <el-table-column prop="price" label="价格" width="80">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.price"
            :precision="2"
            :step="1"
            :max="10000"
            size="mini"
            :controls="false"
            @change="changeRowPrice(scope)"
          ></el-input-number>
        </template>
      </el-table-column>
    </el-table>

    <div class="margin-top-sm">
      <span>统一调价</span>
      <el-input-number
        :controls="false"
        size="mini"
        v-model="priceNum"
        @change="changePrice"
        :precision="2"
        :step="0.1"
      ></el-input-number>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    price: {
      type: Number,
      default: 0
    },
    priceMap: {
      type: Object,
      default: function() {
        return {};
      }
    },
    title: {
      type: String
    },
    selectOption: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    checkOption: {
      type: Array,
      default: function(params) {
        return [];
      }
    },
    cardInfo: {
      type: Object,
      default: function(params) {
        return {
          cities: [],
          cardTitle: "",
          checkedCities: []
        };
      }
    }
  },
  watch: {
    checkOption(newValue, oldValue) {
      this.checked = newValue;
      console.log("newValue :>> ", newValue);

      if (this.tableData.length > 0) {
        this.selectTableRow();
      } else {
        setTimeout(() => {
          this.selectTableRow();
        }, 1000);
      }
    },
    price(val) {
      this.priceNum = val;
    },
    selectOption() {
      this.init();
    }
  },
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      checked: [],
      tableData: [],
      selectOptionArr: [],
      multipleSelection: [{ id: "11", name: "美国空派普货(包税)", price: 6 }],
      priceNum: 0
    };
  },
  mounted() {},
  methods: {
    init() {
      const arr = [];
      const arr2 = [];
      for (const key in this.selectOption) {
        const obj = {
          id: key,
          name: this.selectOption[key],
          price: this.priceMap[key]
        };

        arr.push(obj);
      }
      this.tableData = arr;
    },
    selectTableRow() {
      for (let [i, e] of this.tableData.entries()) {
        if (this.checked.includes(Number(e.id))) {
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(
              this.tableData[i],
              true
            );
          });
        }
      }
    },
    handleCheckAllChange(val) {
      const arr = [];
      for (const key in this.selectOption) {
        console.log("key :>> ", key);
        arr.push(parseInt(key));
      }
      // console.log("val :>> ", this.selectOptionArr);
      const checkedCities = val ? arr : [];
      this.$emit("update:checkOption", checkedCities);
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      this.$emit("update:checkOption", value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cardInfo.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cardInfo.cities.length;
    },
    changePrice(currentValue) {
      this.$emit("update:price", currentValue);
    },
    handleSelectionChange(val) {
      const ids1 = [];
      const ids2 = [];
      for (const i of this.multipleSelection) {
        ids1.push(i.id);
      }
      for (const i of val) {
        ids2.push(i.id);
      }
      this.$emit("update:checkOption", ids2);

      this.subSet(ids1, ids2);

      this.multipleSelection = val;
    },
    subSet(arr1, arr2) {
      var set1 = new Set(arr1);
      var set2 = new Set(arr2);

      var subset = [];

      for (let item of set1) {
        if (!set2.has(item)) {
          subset.push(item);
        }
      }

      for (const i of subset) {
        const index = this.tableData.findIndex(x => x.id == i);
        delete this.tableData[index].price;
      }
    },
    changeRowPrice(scope) {
      this.$nextTick(() => {
        this.$refs.multipleTable.toggleRowSelection(scope.row, true);
      });
      let priceMap = {};
      for (let s of this.tableData) {
        priceMap[s.id] = s.price;
      }
      this.$emit("update:priceMap", priceMap);
    }
  }
};
</script>
<style scoped>
/deep/.table-main .el-input-number .el-input__inner {
  width: 70px;
  padding: 0;
}

.el-card__body {
  padding: 10px;
}
</style>
<style lang="scss" scoped></style>
